<template>
    <div>
        <div class="chart_detail" ref="chart0"></div>
    </div>
    
</template>
<script>
import $ from 'jquery';
import * as echarts from 'echarts';
export default {
  props: ["info","id","fanwei","color","background"],
  data() {
    return {
        chart0: null,
        chart0Max:100,//曲线0y轴最大值
        chart0Min:0,//曲线0y轴最小值
        reasMax:25,//曲线合理区间，高低限范围
        reasMin:15,//曲线合理区间，高低限范围
        historyData0:{}
    }
  },
  created() {
    // this.$nextTick(() => {
    //   this.getCharts0();
    // })
  },
  methods: {
    //历史曲线
    getHisData(){
        this.$nextTick(() => {
            let time =  Date.parse(new Date())/1000; //当前时间
            //曲线0周温度
            this.historyData0 = {
                'value':[],
                'time':[],
            }
            //温度
            var params = {
                "getdevhistorymap":{
                    "btime":time-this.fanwei,
                    "etime":time,
                    "uid":this.info.uid,
                    "addr":this.info.addr,
                    "id":this.id
                },
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            };
            this.$http.post(this.$baseUrl, params).then((res) => {
            var l = res.data.getdevhistorymap.length
            for(var y = 0; y < l; y++){
                this.historyData0['value'].push(res.data.getdevhistorymap[y].v) 
                if(y == l-1){
                    this.historyData0['time'].push(this.formatDate(time * 1000, 'YYYY-MM'))
                    // 最大值
                    this.chart0Max = this.historyData0['value'][0]
                    for (let i = 0; i < this.historyData0['value'].length; i++) {
                    if (this.historyData0['value'][i] > this.chart0Max) {
                        this.chart0Max = this.historyData0['value'][i];
                    }
                    }
                    this.chart0Max = this.chart0Max + 5
                    if(this.chart0Max < this.reasMax){//当y轴最大值小于合理区间最高值时，取合理区间最高值+5为y轴最大值
                    this.chart0Max = this.reasMax+5
                    }
                    // 最小值
                    this.chart0Min = this.historyData0['value'][0]
                    for (let i = 0; i < this.historyData0['value'].length; i++) {
                    if (this.historyData0['value'][i] < this.chart0Min) {
                        this.chart0Min = this.historyData0['value'][i];
                    }
                    }
                    this.chart0Min = this.chart0Min -5
                    if(this.chart0Min > this.reasMin){//当y轴最小值大于合理区间最低值时，取合理区间最低值-5为y轴最小值
                    this.chart0Min = this.reasMin-5
                    }
                    setTimeout(()=> {
                    this.getCharts0()
                    },500)
                }else if(y == 0){
                    this.historyData0['time'].push(this.formatDate((time-this.fanwei) * 1000, 'YYYY-MM'))
                }else{
                    this.historyData0['time'].push(this.formatDate(((time-this.fanwei)+y) * 1000, 'YYYY-MM'))
                }
            }
            })
        })
    },
    getCharts0(){
      if (this.chart0 == null) {
        this.chart0 = echarts.init(this.$refs.chart0);
      }
      
      // this.chart1 = echarts.init(this.$refs.chart1);
      var option = {
  
          xAxis: {
            type: 'category',
            boundaryGap: true, //坐标轴两边是否留白
            nameLocation: 'middle',
            axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                color: "#233e64" //x轴颜色
                },
                //boundaryGap: true
            },
            axisLabel: {
              show:false,
            },
            data: this.historyData0['time']
          },
          yAxis: {
            type: "value", //y轴数据类型为连续的数据
            min:this.chart0Min,//y轴上的刻度最小值
            max:this.chart0Max,//y轴上的刻度最大值
            // min:"dataMin",//y轴上的刻度最小值
            // max:"dataMax",//y轴上的刻度最大值
            splitLine: {
                //y轴上的y轴线条相关设置
                show: true,
                lineStyle: {
                color: "#233e64"
                },
            },
            axisLabel: {
                //y轴的标签相关设置
                textStyle: {
                color: "#6a9cd5"
                },
            },
            axisLine: {
                //y轴的相关设置
                show: true,
                lineStyle: {
                color: "#233e64" //y轴颜色
                }
            },
          },
          series: [
            {
              name: "温度",
              type: 'line', 
              smooth: true,
              showSymbol: false,
              lineStyle: {
                  //线条的相关设置
                  normal: {
                  color: this.color // 线条颜色
                  }
              },
              markArea: {//合理区间
                  itemStyle : { //全局的
                      normal : {
                          color : this.background
                      }
                  },
                  data : [ [ {
                      yAxis : this.reasMin,//y轴坐标控制
                      itemStyle : {
                          color : this.background
                      },
                  }, {
                      yAxis : this.reasMax,//y轴坐标控制
                      itemStyle : {
                          color : this.background
                      }
                  } ] ]
              },
              data:this.historyData0['value']
            }
          ]
      };
      this.chart0.setOption(option);
    },
  }
}
</script>
<style scoped>
/* .chart_detail {
  width: 400px;
  height: 350px;
  position: relative;
} */
</style>